<template>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="6em">
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="上级角色" prop="pid">
                    <el-cascader v-model="formData.pid" :options="roleData" :props="props" clearable></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="角色权限" prop="level_rules">
                    <el-cascader v-model="formData.level_rules" :options="menuData" :props="props2" clearable></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="formData.name" placeholder="示例：超级管理员" maxlength="10" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch v-model="formData.status" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm">完成({{ current + 1 }}/{{ selection.length }})</el-button>
            <el-button type="primary" icon="el-icon-close" @click="onCancel">取消</el-button>
        </el-row>
    </el-form>
</template>

<script>
import { post, get } from "@/assets/js/http.js";

export default {
    name: "role-edit",
    props: {
        roleData: {
            type: Array,
            default: () => []
        },
        menuData: {
            type: Array,
            default: () => []
        },
        selection: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        selection() {
            this.setFormData();
        }
    },
    mounted() {
        this.setFormData();
    },
    data() {
        return {
            current: 0,
            props: {
                label: "name",
                value: "id",
                children: "children",
                checkStrictly: true
            },
            props2: {
                label: "title",
                value: "id",
                children: "children",
                multiple: true
            },
            formData: {
                pid: "",
                level_rules: [],
                name: "",
                status: "1"
            },
            formRules: {
                level_rules: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ]
            }
        };
    },
    methods: {
        async setFormData() {
            if (this.selection.length > 0) {
                const item = this.selection[this.current];
                const data = await get({
                    url: "/admin/auth.group/edit",
                    params: {
                        id: item.id
                    }
                });
                const row = data.row;
                this.formData.pid = row.pid;
                this.formData.id = row.id;
                this.formData.name = row.name;
                this.formData.level_rules = JSON.parse(row.level_rules);
                this.formData.status = row.status;
            }
        },
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    formData.rules = Array.from(
                        new Set(formData.level_rules.flat())
                    );
                    if (Array.isArray(formData.pid)) {
                        formData.pid = formData.pid[formData.pid.length - 1];
                    }
                    await post({
                        url: "/admin/auth.group/edit",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    if (this.current === this.selection.length - 1) {
                        this.$emit("update");
                        this.$parent.$emit("update:visible", false);
                        this.$refs.formRef.resetFields();
                    } else {
                        this.current += 1;
                        this.setFormData();
                    }
                }
            });
        },
        onCancel() {
            if (this.current > 0) {
                this.$emit("update");
            }
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>